<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
	<link rel="stylesheet" type="text/css" href="../css/common.css" />
	<link rel="stylesheet" type="text/css" href="../font/iconfont.css" />
	<style type="text/css">
		.carslife {
			box-shadow: 0 0 1px #bbb;
			width: auto;
			height: auto;
			background: #fff;
			border-radius: 0.2rem;
			padding: 20px 20px 20px 0;
			margin-bottom: 10px;
		}
		
		.carslife:last-child {
			margin-bottom: 0;
		}
		
		.carlifecheck-box {
			position: relative;
			width: 5rem;
			text-align: center;
			display: block;
			height: 100%;
			font-size:40px;
			color: #ccc;
		}
		
		.carlifer {
			flex: 1;
			-webkit-flex: 1;
			padding-left: 1rem;
		}
		
		.chepai {
			font-weight: bold;
			font-size: 18px;
		}
		
		.chexing {
			padding-top: 1rem;
			color: #999;
			font-size: 14px;
		}
		
		.icon-check-b {
			font-size: 2.5rem;
			color: #999;
		}
		
		.renzstatus {
			float: right;
			font-weight: normal;
			font-size:14px;
			background: orange;
			border-radius: 20px;
			color:#fff !important;
			padding: 3px 10px 3px 10px;
		}
		
		.blockbtn {
			margin: 0 1rem 0 1rem;
		}
		
		.active .carlifecheck-box .icon-xuanze {
			color: dodgerblue;
		}
		
		.hasrenzheng {
			color: orange;
		}
		
		.help {
			padding:0;
			color: #555;
			font-size: 1.2rem;
			padding-bottom:1rem;
		}
		#nextbtn{
			margin: 0;
		}
		#jcontent{
			padding:0.5rem;
		}
	</style>
</head>

<body>
	<div id="jcontent" class="jcontent">
		<div class="carslife jflex vcenter" v-for="row in car.data" v-bind:data-pinpai="row.carBrandName + row.carSeriesName +row.carModelName" v-bind:data-goumairiqi="row.purchaseDateForamt" v-bind:data-chepai="row.licensePlate" v-bind:data-rzstatus="row.state" v-bind:data-rz="row.id">
			<div class="carlifecheck-box line-r">
				<i class="iconfont icon-xuanze"></i>
			</div>
			<div class="carlifer">
				<div class="chepai" >
					{{row.licensePlate}}
					<div class="renzstatus hasrenzheng" v-if="row.state==0"><i class="iconfont icon-renzheng"></i>&nbsp;未认证 </div>
					<div class="renzstatus hasrenzheng" v-if="row.state==1"><i class="iconfont icon-renzheng"></i>&nbsp;审核中 </div>
					<div class="renzstatus hasrenzheng" v-if="row.state==2"><i class="iconfont icon-renzheng"></i>&nbsp;已认证 </div>
				</div>
				<div class="chexing">{{row.carBrandName}}{{row.carSeriesName}}{{row.carModelName}}<!--&nbsp;&nbsp;|&nbsp;&nbsp;{{row.purchaseDateForamt}}购买--></div>
			</div>
		</div>
		
		<div id="nodatas" class="nodatas hide" v-if="car.init==true">
			<span class="nodatas-icon"><i class="iconfont icon-wjl nodataicons"></i></span>
			<div class="nodata-tip">请先添加车辆信息后再进行预约</div>
		</div>
		<!--<div class="help" v-if="car.init==false">第一次在选择4S店进行保养预约需要该4S店认证 </div>-->
		<a id="nextbtn" class="blockbtn" v-if="car.init==false">确认预约</a>
	</div>
	
	<script src="../js/mui.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="../js/common.js" type="text/javascript" charset="utf-8"></script>
	<script src="../js/vue.mini.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		var data={
			car:{
				init:true
			}
		};
		var vm = new Vue({
			el: '#jcontent',
			data: data
		});
		
		//加载页面数据
		mui.plusReady(function() {
			window.setTimeout(function(){
				loadMyCars();
			},360);
		});
		
		/**
		 * 加载数据
		 */
		window.addEventListener("loadList", function(e) {
			loadMyCars();
		});
		
		/**
		 * 
		 * 加载我的车辆
		 * 
		 */
		function loadMyCars(){
			//获取4s店id
			var sellerId = webapp.GetQueryString("id");
			webapp.ajax({
				url: "/carLife/admin/interface/carMessage/selectMyCarsWithSellerId",
				data:{
					sellerId: sellerId
				},
				success: function(json) {
					webapp.debug(json);
					if(json.code==200){
						data.car=json;
						data.car.init=false;
					}else{
						mui.toast(json.msg);
					}
				}
			});
		}
		
		/**
		 * 
		 * 车辆的点击事件，选中自己，其他的焦点去掉
		 * 
		 */
		mui('#jcontent').on('tap', '.carslife', function(e) {
			var s = document.querySelector(".carslife.active"); 
			if(!webapp.util.isNull(s)) { 
				s.classList.remove("active");
			}
			this.classList.add("active");
		});
		
		/**
		 * 
		 * 确认按钮的点击事件，根据不同状态进行不同的操作
		 * 
		 */
		mui('body').on('tap', '#nextbtn', function(e) {
			var s=document.querySelector(".carslife.active");
			if(webapp.util.isNull(s)) {
				mui.toast("请选择一辆车！");
				return false;
			}
			//车辆的id
			var carMessageId=s.getAttribute("data-rz");
			//4s店的id
			var sellerId=webapp.GetQueryString("id");
			//车牌
			var chepai=s.getAttribute("data-chepai");
			//判断车辆是否已经认证
			var status = s.getAttribute("data-rzstatus"); 
			//车辆品牌
			var pinpai= s.getAttribute("data-pinpai");
			//购买日期
			var goumairiqi=s.getAttribute("data-goumairiqi");
			//4S店的名称
			var sellerName=webapp.GetQueryString("sellerName");
			var fansNum=webapp.GetQueryString("fansNum");
			var followNum=webapp.GetQueryString("followNum");
			var adress=webapp.GetQueryString("adress");
			var param="?sellerId="+sellerId+"&carMessageId="+carMessageId+"&pinpai="+pinpai+"&chepai="+chepai+"&goumairiqi="+goumairiqi+"&sellerName="+sellerName+"&fansNum="+fansNum+"&followNum="+followNum+"&adress="+adress;
			
			if(status == "0") {
				var _logo=webapp.GetQueryString("logo");
				param=param+"&logo="+_logo;
				//跳转到认证界面
				webapp.openByTpl2({
					title: "车辆认证",
					hrefs:"/tpl/renzheng.html"+param
				});
			} else if(status == "1") {
				//正在认证中
				mui.toast("该4s店正在对您的车辆进行认证！");
			} else if(status == "2") {
				webapp.openByTpl2({
					title: "保养预约",
					hrefs: "/tpl/yuyue.html"+param
				});
			}
		});
	</script>
</body>

</html>